import React from 'react'
import {
  useNavigate,
  useParams,
  useLocation,
  useSearchParams,
} from 'react-router-dom'

export default function Login() {
  // 接收路由参数. params是一个对象
  // const params = useParams()
  // console.log(params)

  // 接收state数据
  // const location = useLocation()
  // console.log(location.state)

  // 接收查询字符串
  // 1. 通过location.search也可以接收查询字符串,但是获取数据不方便
  // 2. 其他方式

  const [query, setQuery] = useSearchParams()
  console.log(query) //注意: query中确实有我们传递的数据,但是直接打印看不到.应该使用query.get方法查看数据
  console.log(query.get('xxx'))
  console.log(query.get('yyy'))
  // console.log(setQuery) // 这个方法,用来修改浏览器地址栏的查询字符串
  // return <h1>Login,</h1>
  return (
    <h1>
      Login,
      <button
        onClick={() => {
          setQuery('a=123&b=789')
        }}
      >
        修改查询字符串
      </button>
    </h1>
  )
}
